<template>
  <div>
    <div class="inputStr">
      <el-button @click="showSave" style="margin-right: 80px" type="primary">添加</el-button>
      <el-input v-model="pagination.queryContent" clearable style="width: 150px" placeholder="请输入姓名"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin: 15px" @click="queryStr">搜索</el-button>
    </div>
    <div v-loading="loading">
      <el-table
          :data="categoryList"
          border
          style="width: 100%">
        <el-table-column
            prop="name"
            label="名称"
            align="center">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            align="center">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            align="center"
            label="修改时间">
        </el-table-column>
        <el-table-column
            fixed="right"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button type="info" @click="showUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding-top: 40px">
      <el-pagination
          class="pagiantion"
          :total="total"
          @current-change="handleSelectionChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>

    <el-dialog
        title="编辑"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <div style="text-align: center">
        <span style="font-weight: bold">分类名称:</span>
        <el-input
            style="width: 200px"
            placeholder="请输入内容"
            v-model="category.name"
            clearable>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="shutUpdate">取 消</el-button>
    <el-button type="primary" @click="updateCategory">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="添加"
        :visible.sync="centerDialogVisible2"
        width="30%"
        center>
      <div style="text-align: center">
        <span style="font-weight: bold">类别名称:</span>
        <el-input
            style="width: 200px"
            placeholder="请输入内容"
            v-model="category.name"
            clearable>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="saveCategory">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GoodCategory",
  data() {
    return {
      total: 0,
      category: {},
      categoryList: [],
      centerDialogVisible: false,
      centerDialogVisible2: false,
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        queryContent: ""
      },
    }
  },
  mounted() {
    this.findPage();
  },
  methods: {
    shutUpdate() {
      this.centerDialogVisible = false;
      this.findPage();
    },
    saveCategory() {
      this.axios.post("/category/save", this.category).then(resp => {
        if (resp.data.statusCode == 200) {
          this.centerDialogVisible2 = false;
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          this.findPage();
        }
      })
    },
    showSave() {
      this.category = {};
      this.centerDialogVisible2 = true;
    },
    updateCategory() {
      this.axios.put("/category/updateCategory", this.category).then(resp => {
        if (resp.data.statusCode == 200) {
          this.centerDialogVisible = false;
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          this.findPage();
        }
      })
    },
    showUpdate(category) {
      this.centerDialogVisible = true;
      this.category = category;
    },
    deleteById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete("/category/deleteById/" + id).then(resp => {
          if (resp.data.statusCode == 200) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            });
            this.findPage();
          }
        })
      })
    },
    queryStr() {
      this.findPage();
    },
    handleSelectionChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage();
    },
    findPage() {
      this.loading = true;
      this.axios.post("/category/findPage", this.pagination).then(resp => {
        if (resp.data.statusCode == 200) {
          this.total = resp.data.data.total;
          this.categoryList = resp.data.data.data;
        }
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>
.inputStr {
  width: 500px;
  margin-left: 600px;
}
</style>
